<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="asd"></div>
</body>
</html>
<script>
    const obj = {
        name : 'ming',
        age : 13
    }

    const div = document.querySelector('.asd')

    //render 渲染
    function render(obj){
        return div.innerHTML = `
            <li>
                <span>姓名：</span>
                <span>${obj.name}</span>
            </li>
            <li>
                <span>年龄：</span>
                <span>${obj.age}</span>
            </li>
        `
    }

    render(obj)

    // Vue2 的 用法 利用对象的 setter函数 / set() 函数 / set 钩子函数

/*

    function controler (data,render) {
        let objm = {}
        for (const key in data) {
            Object.defineProperty(objm,key,{
                set(val){
                    data[key] = val
                    render(obj)
                }
            })
        }
        return objm
    }

    const vm = controler(obj,render)

*/

    //Vue3 利用 Proxy 实现了 对数据的劫持 从而实现了 对 data 数据的 更改

    function controler (data,render){
        return new Proxy(data,{
            set(target,key,val){
                target[key] = val
                render(target)
            }
        })
    }

    const vm2 = controler(obj,render)



</script>